<template>
  <div>
    <el-button @click="openDialog">打开审批</el-button>
    <el-dialog title="审批配置" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <div v-for="(level, index) in approvalLevels" :key="index" class="approval-level">
          <el-form-item :label="`第${index + 1}级审批`" :prop="`level${index + 1}`">
            <el-select ref="select" v-model="level.selectedPositions" multiple placeholder="请选择">
              <el-option v-for="item in level.options" :key="item.value" :label="item.label" :value="item.value">
                <el-checkbox @change="clickBox(item.value, index)"
                  :value="approvalLevels[index].selectedPositions.includes(item.value)"
                  :label="item.label"></el-checkbox>
              </el-option>
              <div class="btn-div">
                <el-row type="flex" justify="center">
                  <el-col :span="12" style="text-align: center;">
                    <el-button size="mini" type="primary" @click="ok">确定</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button size="mini" @click="cancel">取消</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-select>
            <span v-if="approvalLevels.length > 1 && index !== approvalLevels.length - 1" class="delete-icon"
              @click="deleteLevel(index)">删除</span>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="addApprovalLevel" :disabled="approvalLevels.length >= 10">添加审批流</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data () {
    return {
      dialogVisible: true,
      value: [],
      approvalLevels: [
        {
          options: [
            { value: 'option1', label: '岗位1' },
            { value: 'option2', label: '岗位2' },
            { value: 'option3', label: '岗位3' },
            { value: 'option4', label: '岗位4' },
          ],
          // 选中的
          selectedPositions: [],
          selectMessage: ""
        }, // 默认一个审批节点

      ],
      positions: [ /* 岗位数据 */],
      form: {
        // ... 根据审批级数动态绑定字段
      },
      rules: {
        // ... 验证规则
      },
    };
  },

  methods: {
    openDialog () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false;
    },
    handleSubmit () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          // 提交数据
        } else {
          this.$message.error('必填项未填写');
          return false;
        }
      });
    },
    addApprovalLevel () {
      if (this.approvalLevels.length < 10) {
        this.approvalLevels.push({
          options: [
            { value: 'option1', label: '岗位1' },
            { value: 'option2', label: '岗位2' },
            { value: 'option3', label: '岗位3' },
            { value: 'option4', label: '岗位4' },
          ],
          // 选中的
          selectedPositions: []
        },);
      }
    },
    deleteLevel (index) {
      // 检查是否正在使用中的逻辑（假设有一个isProcessing方法）
      if (this.isProcessing(index)) {
        this.$message.error('删除节点失败');
        return;
      }
      this.approvalLevels.splice(index, 1);
      // 重新绑定表单字段和验证规则（如果需要）
    },
    // 弹出来选择框的方法
    cancel () {
      this.$message('点击了取消~');
      this.$refs.select.blur()
    },
    ok () {
      this.$message('点击了确定~');
      this.$refs.select.blur()
    },
    clickBox (val, index) {
      console.log('val::', val);
      let values = this.approvalLevels[index].selectedPositions
      if (values.includes(val)) {
        this.approvalLevels[index].selectedPositions = values.filter(n => n !== val)
      } else {
        values.push(val)
        this.approvalLevels[index].selectedPositions = values
      }
      console.log('this.value::', this.value)
    }


  },
  // ... 生命周期钩子等
};
</script>
